<template>
	<view class="forgetPassword-container">
		<!-- 页面导航栏 -->
		<u-navbar :title="pageTitle" :border-bottom="false" title-size="28" title-color="#333"></u-navbar>

		<view v-if="pageType == 'password'" class="title">修改密码</view>
		<view v-if="pageType == 'phone'" class="title">修改手机号</view>
		<view v-if="pageType == 'forget'" class="title">找回密码</view>
		<!-- <view v-if="pageType == 'password'" class="desc">请输入手机号完成认证后输入新密码</view> -->
		<!-- <view v-if="pageType == 'phone'" class="desc">请输入旧手机号完成认证后输入新手机号</view> -->
		<!-- <view v-if="pageType == 'forget'" class="desc">请输入手机号完成认证后输入新密码</view> -->

		<!-- 忘记密码 Form表单区域 -->
		<view class="formArea">
			<u-form :model="forgetForm" ref="forgetFormRef" label-position="top" :label-style="forgetFormStyle">
				<u-form-item v-if="pageType == 'password' || pageType == 'forget'" label="手机号" prop="phone">
					<u-input v-model="forgetForm.phone" type="number" disabled placeholder="请输入您的手机号" maxlength="11" />
				</u-form-item>
				<u-form-item v-if="pageType == 'phone'" label="旧手机号" prop="oldPhone">
					<u-input v-model="forgetForm.oldPhone" type="请输入您的旧手机号" disabled placeholder="请输入您的旧手机号" maxlength="11" />
				</u-form-item>
				<u-form-item v-if="pageType == 'phone'" label="新手机号" prop="newPhone">
					<u-input v-model="forgetForm.newPhone" type="请输入您的新手机号" placeholder="请输入您的新手机号" maxlength="11" />
				</u-form-item>
				<u-form-item label="验证码" prop="code">
					<u-input v-model="forgetForm.code" type="number" placeholder="请输入您的验证码" maxlength="6" />
					<template v-slot:right>
						<text @click="getCode" v-if="showGetCode" class="getCodeText">获取验证码</text>
						<u-verification-code v-show="false" :seconds="seconds" ref="uCode" @change="codeChange" change-text="x" end-text=" " start-text=" "></u-verification-code>
						<text class="getCodeText" v-if="!showGetCode">{{ tips }}后重新获取</text>
					</template>
				</u-form-item>
				<u-form-item v-if="pageType == 'password' || pageType == 'forget'" label="新密码" prop="password">
					<u-input v-model="forgetForm.password" type="password" placeholder="请输入您的新密码" />
				</u-form-item>
			</u-form>
		</view>
	</view>

	<!-- 确认按钮 -->
	<view @click="confirm" class="submit-btn">确认</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/store/userStore';
import { getVerificationCode, changePassword, changePhone } from '@/api/login.js';

// 实例化用户store
const userStore = useUserStore();

// 页面标题
const pageTitle = ref('');

// 页面类型
const pageType = ref('');

// 动态修改页面标题
onLoad((option) => {
	switch (option.pageType) {
		case 'password':
			pageType.value = option.pageType;
			pageTitle.value = '修改密码';
			break;
		case 'phone':
			pageType.value = option.pageType;
			pageTitle.value = '修改手机号';
			break;
		case 'forget':
			pageType.value = option.pageType;
			pageTitle.value = '找回密码';
			break;
		default:
			break;
	}
	// 默认写死用户手机号
	forgetForm.value.phone = userStore.userInfo.tel;
	forgetForm.value.oldPhone = userStore.userInfo.tel;
});

// 登录表单label样式
const forgetFormStyle = ref({
	fontSize: '32rpx',
	color: '#333',
	fontWeight: '500'
});

// 忘记密码表单
const forgetForm = ref({
	phone: '', // 手机号
	oldPhone: '', // 旧手机号
	newPhone: '', // 新手机号
	password: '', // 密码
	code: '' // 验证码
});

// 获取验证码
const showGetCode = ref(true);
const uCode = ref(null); // 验证码倒计时组件实例
const getCode = () => {
	if ((pageType.value == 'password' && forgetForm.value.phone) || (pageType.value == 'phone' && forgetForm.value.newPhone)) {
		uni.showLoading({
			title: '正在获取验证码'
		});
		getPhoneCode();
	} else {
		uni.showToast({
			title: '请输入手机号',
			icon: 'none'
		});
	}
};

// 获取验证码
const getPhoneCode = async () => {
	let res = await getVerificationCode({
		phoneNumber: pageType.value == 'password' ? forgetForm.value.phone : forgetForm.value.newPhone,
		sendType: pageType.value == 'password' ? '5' : '6',
	});
	uni.hideLoading();
	if (res.code == 200) {
		uCode.value.start();
		showGetCode.value = false;
		uni.showToast({
			title: '验证码已发送',
			icon: 'none'
		});
	}
};

// 验证码倒计时变化
const tips = ref('');
const seconds = ref('10');
const codeChange = (text) => {
	tips.value = text;
	tips.value < 1 ? (showGetCode.value = true) : '';
};

// 确认修改
const confirm = () => {
	let pass = checkForm();
	if (pageType.value == 'password' && pass) {
		changePasswordFun();
	} else if (pageType.value == 'phone' && pass) {
		changePhoneFun();
	}
};

// 修改密码
const changePasswordFun = async () => {
	let res = await changePassword({
		phoneNumber: forgetForm.value.phone,
		password: forgetForm.value.password,
		verCode: forgetForm.value.code
	});
	if (res.code == 200) {
		uni.showToast({
			title: '修改成功',
			icon: 'none'
		});
		userStore.clearAll();
		userStore.$reset();
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/login/index'
			});
		}, 1000);
	};
};

// 修改手机号
const changePhoneFun = async () => {
	let res = await changePhone({
		oldPhone: forgetForm.value.oldPhone,
		newPhone: forgetForm.value.newPhone,
		verCode: forgetForm.value.code
	});
	if (res.code == 200) {
		uni.showToast({
			title: '修改成功',
			icon: 'none'
		});
		userStore.clearAll();
		userStore.$reset();
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/login/index'
			});
		}, 1000);
	};
};

// 校验表单
const checkForm = () => {
	if (pageType.value == 'password') {
		if (forgetForm.value.phone == '') {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return false;
		}
		if (forgetForm.value.code == '') {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			});
			return false;
		}
		if (forgetForm.value.password == '') {
			uni.showToast({
				title: '请输入新密码',
				icon: 'none'
			});
			return false;
		}
		return true;
	} else if (pageType.value == 'phone') {
		if (forgetForm.value.oldPhone == '') {
			uni.showToast({
				title: '请输入旧手机号',
				icon: 'none'
			});
			return false;
		}
		if (forgetForm.value.newPhone == '') {
			uni.showToast({
				title: '请输入新手机号',
				icon: 'none'
			});
			return false;
		}
		if (forgetForm.value.code == '') {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			});
			return false;
		}
		return true;
	}
};
</script>

<style lang="scss" scoped>
.forgetPassword-container {
	min-height: 100vh;
	padding-top: 80rpx;
	// padding: 80rpx 40rpx;

	.title {
		color: #333;
		font-size: 52rpx;
		font-weight: 600;
		margin-bottom: 24rpx;
		padding: 0 40rpx;
	}

	.desc {
		color: #999;
		font-size: 28rpx;
		margin-bottom: 96rpx;
		padding: 0 40rpx;
	}

	.formArea {
		padding: 0 40rpx;

		.getCodeText {
			color: $uni-main-color;
			font-size: 28rpx;
		}
	}
}

.submit-btn {
	position: absolute;
	left: 50%;
	bottom: 200rpx;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	width: 654rpx;
	height: 104rpx;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 80rpx;
	background: linear-gradient(90deg, #3ed979 0%, #00c582 100%);
}
</style>
